import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible'
// eslint-disable-next-line import/no-duplicates
import { DatetimePicker,NavBar, Form, Field, Button, Tabbar, TabbarItem, Icon, Tab, Tabs, Cell, List, PullRefresh, ActionSheet, Notify, Popup, Row, Col, Badge, Search, Image as VanImage, Divider, CellGroup, Tag, Dialog} from 'vant'
Vue.use(DatetimePicker)
Vue.use(Dialog)
Vue.use(CellGroup)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(VanImage)
Vue.use(Search)
Vue.use(Row)
Vue.use(Col)
Vue.use(Badge)
Vue.use(Popup)
Vue.use(Notify)
Vue.use(ActionSheet)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(Cell)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.config.productionTip = false

// 封装中间件函数插件
let directiveObj = {
    install (Vue) {
      Vue.directive('fofo',{
        // 自己创组件,目标是输入框自动聚焦
        // insert 指令所在标签,被插入到真实DOM才触发，如果标签用display：none隐藏再出现,不会再触发inserted
        inserted (el) {
          // 指令所在是van-search组件
          // 组件根标签是div，input在内部
          // 以上都是原生标签对象
          if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
            el.focus()
          } else {
              // el本身不是输入框，尝试在里面获取一下
              setTimeout(() => {
                 const theInput = el.querySelector('input')
                 const theTextArea = el.querySelector('textarea')
                 // 判断: 不一定能获取到,需要加判断,有值了,再执行.focus（）才不报错
                if (theInput) theInput.focus()
                if (theTextArea) theTextArea.focus()
              })
          }
        },
        update(el) { // 指令所在标签，被更新时触发
            if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
              el.focus()
            } else {
              // el本身不是输入框，尝试在里面获取一下
              setTimeout(() => {
                const theInput = el.querySelector('input')
                const theTextArea = el.querySelector('textarea')
                // 判断: 不一定能获取到,需要加判断,有值了,再执行.focus（）才不报错
                if (theInput) theInput.focus()
                if (theTextArea) theTextArea.focus()
              })
            }
        }
      })
    }
}
// 执行目标对象里install方法并传入Vue类
Vue.use(directiveObj)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
